<template>
  <div class="app-container v-flex">
    <filter-form :form="listQuery" :show="listshow" :data="filterData" @search="search" @addForm="addForm" @resizeTable="resizeTable" />
    <div ref="main" class="v-flex-elastic">
      <el-table
        v-if="height>0"
        ref="multipleTable"
        v-loading="listLoading"
        :data="tableData"
        :height="height"
        tooltip-effect="dark">
        <el-table-column
          align="center"
          type="selection"
          width="50" />
        <el-table-column
          label="序号"
          align="center"
          type="index"
          width="50" />
        <el-table-column
          v-if="tableColumnCheckLists[0].ispass"
          prop="jobType"
          align="center"
          show-overflow-tooltip
          label="任务类别" />
        <el-table-column
          v-if="tableColumnCheckLists[1].ispass"
          prop="backupType"
          align="center"
          show-overflow-tooltip
          label="备份类别" />
        <el-table-column
          prop="name"
          align="center"
          show-overflow-tooltip
          label="备份名称" />
        <el-table-column
          prop="address"
          align="center"
          show-overflow-tooltip
          label="源地址" />
        <el-table-column
          prop="triggerLastTime"
          align="center"
          show-overflow-tooltip
          label="备份开始时间" />
        <el-table-column
          prop="dtDec"
          align="center"
          show-overflow-tooltip
          label="启停状态">
          <template slot-scope="scope">
            <span v-if="scope.row.status===0">暂停</span>
            <span v-else>启动</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="author"
          align="center"
          show-overflow-tooltip
          label="编辑人员" />
        <el-table-column
          fixed="right"
          align="center"
          width="120"
          class-name="small-padding fixed-width">
          <template #header>
            启动暂停
            <el-dropdown :hide-on-click="false">
              <i class="el-icon-s-operation columnSetIco" />
              <el-dropdown-menu slot="dropdown">
                <el-checkbox-group v-model="tableColumnCheck">
                  <el-dropdown-item v-for="(item,index) in checkList" :key="index"><el-checkbox :key="item" :label="item" />
                  </el-dropdown-item>
                </el-checkbox-group>
              </el-dropdown-menu>
            </el-dropdown>
          </template>
          <template slot-scope="{row ,$index}">
            <el-button
              size="mini"
              class="td-btn-operation"
              @click="site(row)">启动</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="page-box">
      <pagination
        :total="total"
        :page.sync="listQuery.page"
        :size.sync="listQuery.size"
        @pagination="getList" />
    </div>
  </div>
</template>

<script>
import { getList, updateStatus } from '@/api/dsc/sysm/backups/system'
import { tableMixin } from '@/utils/public'
export default {
  name: 'DscType',
  mixins: [tableMixin],
  data() {
    return {
      height: 0, // table高度
      tableData: [], // 表格数据
      listQuery: {// 搜索条件
        page: 1,
        size: 20
      },
      listshow: {
        addForm: false,
        deleta: false,
        search: true,
        toggleSearch: false
      },
      filterData: {
        keyName: {
          key: 'keyName',
          type: 'input',
          title: '用户姓名',
          placeholder: '请输入用户姓名'
        },
        keyContent: {
          key: 'keyContent',
          type: 'input',
          title: '日志时间',
          placeholder: '请输入日志时间'
        },
        keyBz: {
          key: 'keyBz',
          type: 'input',
          title: '错误内容',
          placeholder: '请输入错误内容',
          width: '450px'
        },
        keyB: {
          key: 'keyBz',
          type: 'input',
          title: '是否修复',
          placeholder: '是否修复',
          width: '450px'
        }
      },
      platformOptions: [], // 所属平台option
      total: 0,
      textMap: {
        update: '编辑',
        view: '查看',
        create: '添加'
      },
      dialogFormVisible: false, // 弹窗开关
      dialogStatus: '', // 弹窗类型（添加、查看、编辑）
      dialog: {
        visible: false,
        title: '',
        loading: false,
        disabled: false
      },
      temp: {},
      tempForm: {// 弹窗表单
        id: null,
        dtName: '',
        dtCode: '',
        dtDec: '',
        isPub: true,
        isSystem: true,
        status: true
      },
      rowIndex: null,
      rules: {},
      rulesModel: {
        dtName: [{ required: true, message: '必填', trigger: 'blur' },
          { min: 1, message: '大于1个字符', trigger: 'blur' },
          { max: 20, message: '小于20个字符', trigger: 'blur' }],
        dtCode: [{ required: true, message: '必填', trigger: 'blur' },
          { min: 1, message: '大于1个字符', trigger: 'blur' },
          { max: 20, message: '小于20个字符', trigger: 'blur' }],
        dtDec: [{ max: 255, message: '小于255个字符', trigger: 'blur' }]
      },
      listLoading: false,
      disabled: false, // 是否禁止表单操作
      tableColumnCheck: ['任务类别', '备份类别'],
      checkList: ['任务类别', '备份类别'],
      tableColumnCheckLists: [
        { label: '任务类别', prop: 'jobType', ispass: true },
        { label: '备份类别', prop: 'backupType', ispass: true }
      ]
    }
  },

  watch: {
    tableColumnCheck(newVal) {
      if (newVal) {
        var arr = this.checkList.filter(i => newVal.indexOf(i) < 0) // 未选中
        this.tableColumnCheckLists.map(i => {
          if (arr.indexOf(i.label) !== -1) {
            i.ispass = false
          } else {
            i.ispass = true
          }
        })
      }
    }
  },
  created() {
    this.temp = Object.assign({}, this.tempForm)
    this.getList()
  },
  methods: {
    // 查询列表
    getList() {
      this.listLoading = true
      getList(this.listQuery).then(response => {
        this.tableData = response.data.list
        this.total = response.data.total
        // for (const i of this.tableData) {
        //   i.isSystem = !!i.isSystem
        //   i.isPub = !!i.isPub
        //   i.status = !!i.status
        // }
        // Just to simulate the time of the request
        setTimeout(() => {
          this.listLoading = false
        }, 0 * 1000)
      }).catch(() => {
        this.listLoading = false
      })
    },
    site(row) {
      updateStatus({ jobId: row.id }).then(response => {
        this.notifiySuccess(response.data)
        this.getList()
      })
    },
    // 搜索
    search() {
      this.listQuery.page = 1
      this.getList()
    },
    // 添加
    addForm() {
      // this.disabled = false
      this.temp = Object.assign({}, this.tempForm)
      // this.dialogStatus = 'create'
      // this.dialogFormVisible = true
      this.rules = Object.assign({}, this.rulesModel)
      this.dialog = Object.assign({}, this.dialog, {
        visible: true,
        title: '添加',
        loading: false,
        disabled: false
      })
    },
    // 添加数据
    // addData() {
    //   this.validate().then(() => {
    //     this.saveOrUpdate(this.temp, 1)
    //   })
    // },
    // 查看
    view(row) {
      // this.disabled = true
      this.temp = Object.assign({}, row) // copy obj
      // this.dialogStatus = 'view'
      this.rules = {}
      // this.dialogFormVisible = true
      this.dialog = Object.assign({}, this.dialog, {
        visible: true,
        title: '查看',
        loading: false,
        disabled: true
      })
    },
    // 编辑
    updateForm(row, $index) {
      // this.disabled = false
      this.rowIndex = $index
      this.temp = Object.assign({}, row) // copy obj
      // this.dialogStatus = 'update'
      this.rules = Object.assign({}, this.rulesModel)
      // this.dialogFormVisible = true
      this.dialog = Object.assign({}, this.dialog, {
        visible: true,
        title: '编辑',
        loading: false,
        disabled: false
      })
    },
    // 编辑数据
    updateData() {
      this.validate().then(() => {
        this.saveOrUpdate(this.temp)
      })
    },
    // type 1 添加，2 编辑
    // saveOrUpdate(params, type) {
    //   const param = Object.assign({}, params)
    //   param.status = param.status ? 1 : 0
    //   param.isPub = param.isPub ? 1 : 0
    //   param.isSystem = param.isSystem ? 1 : 0
    //   saveOrUpdate(param).then(response => {
    //     response.data.status = !!response.data.status
    //     response.data.isPub = !!response.data.isPub
    //     response.data.isSystem = !!response.data.isSystem
    //     if (this.dialog.title === '添加') {
    //       this.tableData.unshift(response.data)
    //       this.total++
    //     } else {
    //       Object.assign(this.tableData[this.rowIndex], response.data)
    //     }
    //     this.notifiySuccess('保存成功!')
    //     this.dialog.visible = false
    //   })
    // },
    beforeOpenDialog() {
      this.$nextTick(() => {
        this.$refs['dataForm'].clearValidate()
      })
    },
    // 启用、停用,是否系统
    enable(row, $index) {
      this.rowIndex = $index
      this.saveOrUpdate(row, 2)
    }
    // // 删除
    // deleteData(row, $index) {
    //   this.confirmBox('确定删除?').then(() => {
    //     deleteById(row.id).then(response => {
    //       this.notifiySuccess('删除成功!')
    //       // this.tableData.splice($index, 1)
    //       // this.total--
    //       this.getList()
    //     })
    //   }).catch(() => {

    //   })
    // }
  }
}
</script>
